:root {
    --primary-color: rgba(95, 135, 49, 1);
    --primary-color-transparent: rgba(95, 135, 49, 0.3);
    --primary-color-light: rgba(95, 135, 49, 0.15);
}

/* Base Elements */
html,
body {
    min-height: 450px;
    height: 100%;
}

.tooltip .arrow {
    content: '';
    background-position: -144px -118px;
    width: 7px;
    height: 4px;
    position: absolute;
    left: 16px;
    bottom: -4px;
}

.removeClickOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.tooltip form {
    margin: 10px 10px 10px 10px;
}

.tooltip table {
    color: #e8e5ef;
    width: 100%;
}

.tooltip table tr td:first-child {
    font-weight: bold;
}

.tooltip table td {
    padding: 5px 3px;
}

/* Layout Tables */
.optionslist {
    border: 0;
    border-collapse: collapse;
    width: auto;
}

.optionslist td,
.optionslist th {
    padding: 3px;
    vertical-align: top;
    border: 0 !important;
}

.contentlayout {
    border-collapse: collapse;
    width: 100%;
}

/* TypeAhead */
.tt-hint {
    width: 88%;
}

.tt-input {
    width: 89%;
}

/* Header */
#header {
    position: relative;
    height: 100px;
}

body.full #header {
    height: 100px;
}

#tr-header {
    height: 0px;
}

body.full #tr-header {
    height: 83px;
}


.mail-icon,
#mail-icon {
    background-image: url('../img/mail-icon.jpg.cfm');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 3px;
}

/* Utility Classes */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
    /* IE 6/7 fix */
}

.pos-l {
    position: absolute;
    left: 0;
}

.pos-r {
    position: absolute;
    right: 0;
}

.pos-b {
    position: absolute;
    bottom: 0;
}

body {
    min-width: 600px;
    background-color: white;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

body,
td,
th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.3;
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
    font-size: 18px;
    color: var(--primary-color);
    margin: 0;
    padding: 0 0 4px 0;
}

h1 {
    font-size: 32px;
    padding-bottom: 10px
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 13px;
}

*+h1,
*+h2 {
    padding-top: 20px;
}

div.pageintro+h2 {
    padding-top: 0;
}

table+h3,
div+h3 {
    padding-top: 10px;
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: underline
}

tr>th>a {
    color: #ffffff;
}

/* Basic Elements */
img,
a img {
    border: 0;
}
.ext-logo {
    background-color: #fff !important;
}

form,
div {
    margin: 0;
    padding: 0;
}

pre {
    padding: 0px;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap !important;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    word-wrap: break-word;
}

/* Helper Classes */
.clear {
    clear: both
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center
}

.disp-flex {
    display: flex;
}

.flex-pull-right {
    margin-left: auto;
}

/* Layout */
#layout {
    height: 100%;
    max-width: 100%;
    width: 1000px;
    margin: 0px auto;
}

body.full #layout {
    width: 100%;
}

#layouttbl {
    border-spacing: 3px;
    border-collapse: separate;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
}

td.lotd {
    vertical-align: top;
    padding: 0;
    margin: 0;
}

#layouttbl {
    font-size: 11px;
}


@keyframes scaleUp {
    from {
        transform: scale(0.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#logo {
    dmargin: 35px 0 0 0;
    padding: 0px;
    display: inline-block;
    width: 172px;
    height: 81px;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 2048 962' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath transform='translate(688,364)' d='m0 0h12l13 4 6 4 8 7 8 14 2 9-1 11-8 16-11 12-7 6-14 7-20 8-13 8-15 13-10 10-8 10-13 18-12 20-9 16-8 18-2 6v9l4 6 5 4 6 1 8-2 17-8 14-8 22-13 32-21 17-12 14-10 57-42 21-16 17-14 13-11 12-11 10-9 7-7 7-8 22-22 14-10 13-6 11-3 12-1 13 2 10 5 10 9 6 9 1 3v14l-6 11-8 10-10 10-7 8-12 14-10 16-8 16-6 16-7 26-6 31v23l3 12 6 9 6 5 6 2 11-1 22-6 20-8 21-10 11-8 10-9 9-11 14-18 9-11 11-12 9-10 20-20 8-7 11-10 11-9 15-12 18-13 17-12 17-11 20-12 23-12 20-8 23-7 26-6 20-3h20l13 3 10 5 10 8 7 9 4 8 1 4v13l-6 12-9 10-9 7-12 5-14 3h-22l-8-4-22-22-8-4-8 2-12 6-19 13-18 13-16 12-15 13-31 29-7 8-11 12-8 10-13 16-12 19-10 19-5 14 1 9 5 8 6 5 6 2h11l15-3 24-6 46-15 36-13 40-15 24-10 8-6 7-8 10-13 9-11 15-16 9-10 8-7 8-8 8-7 11-10 14-11 15-12 14-10 16-11 20-13 15-9 23-12 19-8 26-8 27-6 18-3h21l14 4 11 6 10 9 6 9 3 7 1 6v8l-3 8-8 11-12 11-27 18-25 15-25 14-34 18-56 28-28 13-39 18-18 8-6 4-5 6-6 12-3 9v8l5 8 6 5 9 3h15l28-7 36-13 29-12 32-13 26-10 40-17 10-7 13-17 9-11 9-10 7-8 5-6h2l2-4 9-9 8-7 16-15 11-9 16-13 18-13 17-12 23-15 15-9 23-12 20-8 22-7 30-7 22-3h14l16 4 11 6 11 10 7 11 2 6v13l-3 8-9 13-9 9-22 18-16 11-22 14-26 15-22 12-23 11-30 14-27 11-29 11-23 8-14 6-9 7-5 8-3 11 1 9 4 10 5 6v2l4 2 13 8 13 5 19 4 9 1h36l27-4 28-7 20-7 21-9 23-12 18-12 10-8 14-12 12-13 7-8 7-5 5 1 2 4v14l-7 14-10 13-12 13-11 9-14 11-19 12-18 10-25 12-29 11-29 9-29 7-30 5-27 3h-43l-24-3-20-5-15-6-11-6-10-8-7-7-6-12-2-7-2-22v-5l-15 5-28 12-38 16-73 30-25 10-21 6-23 4h-18l-12-3-16-8-9-7-8-9-6-10-6-19-3-10-11 2-53 19-35 12-43 13-35 9-24 5-7 1h-18l-13-5-15-8-10-9-6-7-14-28-6-5-6 1-8 4-38 25-21 12-15 7-15 5-11 2h-16l-12-3-10-6-10-10-7-12-3-11v-21l4-26 5-22 9-34 9-29 2-6v-9l-6-6h-7l-17 7-24 13-25 16-22 15-16 12-14 11-14 12-13 11-11 9-15 13-14 12-17 13-15 12-16 11-23 15-17 9-13 4h-20l-12-4-10-6-10-10-6-10-3-10v-19l4-21 6-17 8-16 8-14 20-30 13-18 16-21 12-16 18-22 12-14 12-13 7-8 9-10 10-13 11-13 5-6 8-7 10-7 11-5zm1165 63-12 5-19 11-15 10-11 8-14 11-12 11-9 9-4 6v2l8 1 18-6 18-8 24-12 24-14 12-8 9-7 2-3-1-7-7-8-1-1zm-297 7-14 5-16 9-18 12-19 14-14 12-14 14-3 5 1 3h9l19-7 25-12 25-13 24-15 10-8 2-5-4-8-7-6z' fill='%235f8731'/%3E%3Cpath transform='translate(629,40)' d='m0 0 19 1 12 3 10 5 10 8 6 8 4 9 1 6v12l-4 15-6 14-13 21-13 17-9 11-12 13-9 10-27 27-8 7-10 9-11 9-10 9-11 9-13 11-11 9-11 10-11 9-15 13-12 11-10 9-12 12-8 7-49 49-7 8-20 20-7 8-11 13-12 16-14 19-12 17-11 18-12 23-17 36-12 28-9 24-7 28-3 21-1 14v32l2 20 4 15 6 11 6 7 10 7 14 6 9 2 9 1h23l25-3 99-21 60-12 73-13 51-7 51-5 33-2h90l22 2 14 4 10 6 8 7 3 6v6l-5 9-4 5-8 5-4 1h-20l-25-2h-21l-32 3-55 8-51 9-58 12-63 14-36 10-36 11-29 10-35 15-29 12-30 11-31 9-20 4-16 2-14 1h-45l-20-3-19-7-14-8-11-9-10-10-9-14-6-13-4-15-2-17v-23l2-24 4-23 6-24 12-36 14-34 12-26 22-44 13-23 15-26 14-23 7-11 15-24 25-37 14-20 26-36 16-21 10-13 11-14 13-15 11-14 12-14 12-15 10-13 12-15 12-16 14-18 10-13 13-17 10-13 8-10 11-14 13-16 8-10 11-13 18-20 7-8 12-12 10-8 14-9 15-7 15-4z' fill='%235f8731'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}


#logo.scale-up {
    animation: scaleUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Tabs */
#layouttbl td#tabstd {
    vertical-align: bottom;
    text-align: right;
}

#tabstd a,
#tabstd img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

#admin-tabs {
    width: 126px;
    position: absolute;
    bottom: -14px;
    right: 20px;
}

#admin-tabs a {
    display: block;
    width: 60px;
    height: 32px;
    float: left;
}

/* Navigation */
td#navtd {
    display: inline-block;
    width: 200px;
    height: 100%;
    border-radius: 0px;
    margin: 0px;
    padding: 0px;
    border-right: 1px solid var(--primary-color-transparent);
}

#nav {
    padding: 10px 10px 40px 10px;
}

#nav form {
    white-space: nowrap;
}

#navsearch {
    margin: 10px 0 0 8px;
    width: 120px;
    height: 22px;
    border-color: #333;
    color: #333;
}

/* Login */
td#logintd {
    border-radius: 7px;
    margin: 0px;
}

#login {
    max-width: 100%;
    margin: 0px auto;
    width: 220px;
    height: 300px;
}

/* Content Area */
#contenttd {
    width: 100%;
    margin: 0px;
}

#content {
    padding: 10px 10px 10px 20px;
}

#innercontent {
    margin: 30px 18px 10px 10px;
    padding: 0px 10px 0px 0px;
}

/* Copyright */
#copyright {
    margin: 4px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    font-size: 11px;
    color: #000;
}

#copyright a {
    color: #000;
}

/* Menu */
#menu,
#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu {
    margin: 10px 0px 0px 0px;
}

#menu a {
    display: block;
    text-decoration: none;
}

#menu li {
    margin-top: 1px;
}

#menu li a {
    margin: 12px 0px 3px 0px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
}

#menu li a:hover,
#menu li.collapsed a:hover {
    color: var(--primary-color);
}

#menu li li a {
    margin: 0px 0px 0px 10px;
    font-weight: normal;
    text-decoration: none;
    color: #666;
    font-size: 14px;
}

#menu li li a:hover {
    text-decoration: none;
    color: var(--primary-color);
}

#menu li li a.menu_active {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    padding: 5px 0px 5px 10px;
    background-color: var(--primary-color-light);
    border-radius: 5px;
    border-width: 0px;
}

/* Tables */
table {
    empty-cells: show;
}

td,
th {
    padding: 3px;
    vertical-align: top;
}

th {
    background-color: #36c;
    /* ABC */
    color: #333;
    font-weight: normal;
    text-align: left;
}

table.nospacing {
    border-collapse: collapse;
}

/* Main Tables */
.maintbl {
    width: 100%;
    border-spacing: 3px
}

.maintbl+.maintbl {
    margin-top: 15px;
}

.autowidth {
    width: auto;
}

.maintbl th {
    padding: 10px 10px;
    font-weight: normal;
    empty-cells: show;
    margin: 10px;
    border-radius: 5px;
    background-color: var(--primary-color-light);
}

.maintbl td {
    padding: 3px 5px;
    font-weight: normal;
    empty-cells: show;
    border: 1px solid var(--primary-color-transparent);
    border-radius: 5px;
}

.longwords {
    word-break: break-all;
}

.maintbl th {
    text-align: left;
}

.maintbl>tbody>tr>th {
    width: 30%;
}

.maintbl tfoot td {
    border: none;
    box-shadow: none;
}

td.fieldPadded {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Forms */
input,
select,
textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

input {
    background-color: #fff;
    font-size: 14px;
    padding: 5px 2px 5px 5px;
    margin: 3px 1px 3px 1px;
    color: #333;
    border: 1px solid;
    border-color: #e2e0da;
    height: 19;
}

select {
    font-size: 14px;
    color: #3c3e40;
    margin: 3px 0px;
    padding: 5px 2px 5px 5px;
}

/* Buttons */
.button,
.submit,
.reset {
    outline: none;
    text-align: center;
    text-decoration: none;
    padding: 6px 20px;
    margin-left: 0;
    width: auto;
    overflow: visible;
    border-radius: 5px;
    border-width: 0;
    color: rgba(255, 255, 255, 0.75);
    font-weight: bold;
    font-size: 14px;
    background: var(--primary-color);

}

.button:hover:enabled,
.reset:hover:enabled {
    color: rgba(255, 255, 255, 0.95);
}

.button:active:enabled,
.reset:active:enabled {
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    top: 1px;
}

/* Button Variations */
.bl {
    border-radius: 5px 0 0 5px;
    margin-right: -1px;
    margin-left: -5px;
}

.br {
    border-radius: 0 5px 5px 0;
    margin-left: -1px;
}

.bm {
    border-radius: 0;
    margin-left: -1px;
    margin-right: -1px;
}

.bs {
    margin-left: -5px;
}


.btn-search {
    height: 17px;
    width: 17px;
    display: inline-block;
    outline: none;
    text-decoration: none;
    padding-bottom: 9px !important;
    margin-left: -8% !important;
    margin-top: 5px;
    border-width: 0;
    background-position: -17px 0px;
}

/* Form Input Sizing */
.xlarge {
    width: 96%
}

.autowidth .xlarge {
    width: 400px;
}

.large {
    width: 60%
}

.autowidth .large {
    width: 250px;
}

.medium {
    width: 40%
}

.autowidth .medium {
    width: 150px;
}

.small {
    width: 20%
}

.autowidth .small {
    width: 80px;
}

.xsmall {
    width: 10%
}

.autowidth .xsmall {
    width: 40px;
}

.number {
    width: 40px;
    text-align: right
}

/* Custom Form Inputs */
.radio {
    -webkit-appearance: none;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    padding: 5px;
    border-radius: 50px;
    position: relative;
}

.radio:checked:after {
    content: ' ';
    width: 8px;
    height: 8px;
    border-radius: 50px;
    position: absolute;
    left: 1px;
    top: 1px;
    font-size: 32px;
    background: var(--primary-color);
}

.checkbox {
    -webkit-appearance: none;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    padding: 5px;
    border-radius: 2px;
    position: relative;
}

.checkbox:checked:after {
    content: ' ';
    width: 8px;
    height: 8px;
    border-radius: 3;
    position: absolute;
    left: 1px;
    top: 1px;
    background: var(--primary-color);
    text-shadow: 0px;
}

label:hover {
    cursor: pointer;
    border-bottom: 1px dotted #666;
}

.radiolist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.radiolist>li {
    clear: both;
}

.radiolist.float li {
    float: left;
    padding-right: 0px;
    clear: none;
}

.radiolist .comment {
    padding-left: 20px;
}

.radiolist label b {
    font-weight: normal;
}

.radiolist table {
    margin-left: 20px;
}

/* Error States */
.InputError {
    background: #ffeeee;
}

.commentError {
    font-size: 12px;
    color: #bf4f36;
    text-decoration: none;
}

/* Messages and Comments */
.comment {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    padding: 4px 0px;
}


.important {
    color: red !important;
}

.commentHead {
    font-size: 12px;
    color: #DFE9F6;
}

div.comment+* {
    margin-top: 5px;
}

.checkbox+.comment,
.radio+.comment,
.radiolist label+.comment.inline {
    display: inline;
    padding-left: 10px;
}

h3+.comment {
    padding-top: 0px;
}

.alertprovider {
    font-size: 12px;
    color: #36c;
    text-decoration: none;
    margin-left: 20px !important;
}

/* Message Boxes */
.normal {
    border: 1px solid #dcdad3;
    padding: 5px;
    margin: 10px 0px;
    color: #3c3e40;
}

td.OK,
tr.OK td,
td.active {
    background-color: rgba(0, 221, 26, 0.1);
}

td.installed {
    background-color: rgba(255, 255, 255, 0.1);
}

.tblContentRed,
td.notOK,
tr.notOK td,
td.notinstalled {
    background-color: rgb(250, 0, 0, 0.1);
}

.tblContentYellow,
td.resolved {
    background-color: rgb(255, 255, 0, 0.1) !important;
}

.tblContentRed {
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #bf4f36;
    color: red;
}

.tblContentGreen {
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #009933;
}

.tblContentYellow {
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #ccad00;
}




div.error,
div.warning,
div.warningops,
div.message {
    border: 1px solid red !important;
    padding: 10px;
    margin: 10px 0px;
    color: red !important;
    border-radius: 5px;
    line-height: 1.6;
}

div.error a,
div.warning a,
div.warningops a,
div.message a {
    color: inherit;
    text-decoration: none;
}

div.warning,
div.warningops {
    border: 1px solid #FC6 !important;
    color: #C93 !important;
}

div.message {
    border-color: #0C0;
    color: #000;
}

div.ok {
    border-color: #dcdad3;
    color: #dcdad3;
}

#logouts {
    float: right;
    margin: 1px;
}

.logout {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(95, 135, 49, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-size: 18px;
    text-align: center;
    background-image: url('../img/logout.png.cfm');
    background-repeat: no-repeat;
    background-size: 32px 32px;
    filter: brightness(0) saturate(100%) invert(49%) sepia(18%) saturate(1102%) hue-rotate(53deg) brightness(94%) contrast(92%);
    transition: transform 0.3s, box-shadow 0.3s;
}
.logout:hover {
    transform: scale(1.4);
    z-index: 2;
    border-radius: 50%;
    outline: none; 
}

/* Misc Layout */
div.pageintro {
    margin: 0 0 20px 0;
}

.itemintro {
    margin: -3px 0 10px 0;
}

div.whitePanel {
    padding: 2%;
    border: 1px solid #fff;
    margin-left: 3%;
}

.maintbl.alignLeft {
    margin-left: 3%;
}

.bl.alignLeft {
    margin-left: 3%;
}

.leftSpace {
    padding-left: 3%;
}

.topBottomSpace {
    padding-bottom: 3%;
    padding-top: 2%;
}

.fLeft {
    position: relative;
    float: left;
    width: 33%;
}

.pdTop {
    padding-top: 3%;
}

/* Coding Tips */
.coding-tip-trigger {
    cursor: pointer;
    color: #36c;
}

.coding-tip {
    display: none;
    box-sizing: border-box;
    margin: 0.25rem 0.25rem 1rem 0.25rem;
    padding: 0.5rem;
    border: 0px;
    border-radius: 0.5em;
    background-color: #f1f0f5;
    color: #666;
}

.coding-tip .copy {
    cursor: pointer;
}

.coding-tip.expanded {
    display: block;
}

.coding-tip code {
    white-space: pre-wrap;
    tab-size: 4;
    margin: 0.5em;
    padding: 0.5em;
    background-color: #000;
    color: #66ccff;
    display: block;
}



div.hr {
    border-color: #dcdad3;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    margin: 0px 16px 4px 0px;
}

.linkContext a {
    color: var(--primary-color);
    text-decoration: none;
}

#maintitle a.navsub {
    float: right;
    width: 75px;
    height: 29px;
    border-left: 1px solid #cdcdcd;
    line-height: 27px;
    text-align: center;
}

.fs {
    font-size: 14px !important;
}

.smBtn {
    background: #333 none repeat scroll 0 0;
    border-radius: 5px;
    border-width: 0;
    color: #efede5;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    outline: medium none;
    overflow: visible;
    padding: 3px 5px;
    text-align: center;
    text-decoration: none;
    width: auto;
}

.alertMsg {
    color: black;
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0;
    padding: 5px;
}

.CheckOk {
    font-weight: bold;
    color: #009933;
    font-size: 14px;
}

.CheckError {
    font-weight: bold;
    color: red;
    font-size: 14px;
}

/* Tabs */
td.inactivTab {
    border-style: solid;
    border-color: #dcdad3;
    padding: 0px 5px 0px 5px;
    background-color: #efede5;
}

a.inactivTab {
    color: #3c3e40;
    text-decoration: none;
}

td.activTab {
    border-style: solid;
    border-color: #dcdad3;
    border-width: 1px 1px 0px 1px;
    padding: 2px 10px 2px 10px;
    background-color: #dcdad3;
}

a.activTab {
    font-weight: bold;
    color: #3c3e40;
    text-decoration: none;
}

td.tab {
    border-color: #dcdad3;
    border-width: 1px;
    border-style: solid;
    border-top: 0px;
    padding: 10px;
    background-color: #efede5;
}

td.tabtop {
    border-style: solid;
    border-color: #dcdad3;
    border-width: 0px 0px 1px 0px;
    padding: 0px 1px 0px 0px;
}

/* Filters and Forms */
.filterform {
    padding: 5px;
    margin: 10px 0px;
    border: 1px solid #dcdad3;
    color: #3c3e40;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 4px 2px 2px;
}

.filterform ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filterform li {
    width: auto;
    float: left;
    padding-right: 10px;
}

.filterform label {
    width: 200px;
    height: 18px;
    display: block;
}

.filterform input.txt,
.filterform select {
    width: 200px;
}

.filterform input.submit {
    margin-top: 20px;
}

/* Extensions */
tbody#extproviderlist td {
    height: 40px;
    vertical-align: middle;
}

.extensionlist {
    margin-bottom: 20px;
}

.extensionthumb {
    width: 146px;
    height: 153px; /* Increase if needed */
    overflow: hidden;
    margin: 2px;
    float: left;
    text-align: center;
    position: relative;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.extensionthumb a {
    display: block;
    padding: 0px;
    height: 170px;
    text-decoration: none !important;
    border: 5px solid #dcdad3;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    opacity: 1;
}

.extimg {
    height: 54px;
    margin: 5px 2px 0px 2px;
}

.editIcon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M12.527 7.473L8.527 3.473 1 11 1 15 5 15zM11.172.828l-1.065 1.065 4 4 1.065-1.065c1.105-1.105 1.105-2.895 0-4l0 0C14.067-.276 12.276-.276 11.172.828z' fill='rgba(95, 135, 49, 1)'/%3E%3C/svg%3E") no-repeat left center;
    padding: 4px 0 4px 20px;
    background-size: 16px 16px;
}

.version-selector .btn,
.extension .extension-status {
    color: white;
    background-color: #CC0000;
}

.version-number {
    margin-top: -30px !important;
    margin-left: 50px !important;
    color: var(--primary-color) !important;
    position: relative !important;
    /* Add this to establish positioning context */
}

/* Ribbons */
.ribbon-wrapper {
    width: 115px;
    height: 95px;
    overflow: hidden;
    position: absolute;
    top: -7px;
    right: 0px;
}

.ribbon {
    text-align: center;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
    position: relative;
    padding: 2px 0;
    left: -20px;
    top: 30px;
    width: 190px;
    height: 15px;
    background-color: var(--primary-color);
    color: #fff;
}

.ribbon-left-wrapper {
    width: 95px;
    height: 95px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: 0px;
}

.ribbon-left {
    text-align: center;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
    position: relative;
    padding: 2px 0;
    left: -20px;
    top: 20px;
    width: 190px;
    height: 15px;
    background-color: var(--primary-color);
    color: #fff;
}